<template>
  <view class="schools">
    <view class="top">
      <view class="title-logo"></view>
      <view class="major-name">相关开设院校</view>
    </view>
    <view class="list">
      <view>
        <view v-for="item in topList" class="scholl-info">
          <view class="left">
            <image class="avatar" mode="aspectFill" :src="item.icon" />
          </view>
          <view class="right">
            <view class="name">{{ item.name }}</view>
            <view class="tags">
              <view>{{ item.levelName }}</view>
              <view v-if="item.f985 == 1">985</view>
              <view v-if="item.f211 == 1">211</view>
              <!-- <view v-if="item.dualClassName">{{ item.dualClassName }}</view> -->
              <view v-if="item.tagName">{{ item.tagName }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { positionTagColleges } from "@/api/modules/career";

export default {
  props: {
    positionTagId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      schoolNum: 256,
      topList: [],
    };
  },
  created() {
    console.log("positionTagId-----------aaa", this.positionTagId);
    this.positionTagCollegesFn();
  },
  methods: {
    async positionTagCollegesFn() {
      const params = {
        positionTagId: this.positionTagId || "10137",
      };
      const res = await positionTagColleges(params);
      if (res.code == 200) {
        this.topList = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.schools {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  padding: 28rpx 24rpx;
  margin-bottom: 20rpx;

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    .title-logo {
      width: 8rpx;
      height: 28rpx;
      background: #f75a3e;
      border-radius: 4rpx;
      margin-left: 8rpx;
    }

    .major-name {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      margin-left: 24rpx;
    }

    .check-all {
      right: 0;
      position: absolute;
      font-weight: 400;
      font-size: 26rpx;
      color: #888888;
    }
  }

  .list {
    margin-top: 36rpx;

    .scholl-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 36rpx;

      .left {
        width: 88rpx;
        height: 88rpx;
        margin-right: 16rpx;

        .avatar {
          width: 88rpx;
          height: 88rpx;
        }
      }

      .right {
        .name {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
        }

        .tags {
          margin-top: 8rpx;
          margin-right: 8rpx;
          display: flex;
          flex-direction: row;
          align-items: center;

          view {
            font-weight: 400;
            font-size: 20rpx;
            color: #666666;
            background: #f0f0f0;
            border-radius: 6rpx;
            text-align: center;
            margin-right: 8rpx;
            padding: 2rpx 6rpx;
          }
        }
      }
    }
  }
}
</style>